<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .form .checkbox{width:30px;height:30px;margin: 4px;display: inline-block;}
    .form .checkbox span{display: block;height:30px;background: #ccc;cursor: pointer;}
    .form .checkbox.active span{background: red;}
  </style>
</head>
<body>
  <form>
    <input type="checkbox" name="hobby" value="篮球">
    <input type="checkbox" name="hobby" value="足球" class="a">
    <input type="checkbox" name="hobby" value="乒乓球">
    <input type="submit" value="按钮">
  </form>

  <div class="form">
    <div class="checkbox" data-name="hobby" data-value="篮球">
      <span></span>
    </div>
    <div class="checkbox b" data-name="hobby" data-value="足球">
      <span></span>
    </div>
    <div class="checkbox" data-name="hobby" data-value="乒乓球">
      <span></span>
    </div>
    <input type="button" id="btn" value="按钮">
  </div>  
</body>
<script>

  var checks = document.querySelectorAll(".form .checkbox");
  var btn = document.querySelector(".form #btn");

  for(var i=0;i<checks.length;i++){
    // 绑定事件
    checks[i].onmouseup = function(){
      // 切换选中样式
      this.classList.toggle("active")
      // 根据是否具有选中样式，记录选中状态
      if(this.className.indexOf("active") === -1){
        this.checked = false;
      }else{
        this.checked = true;
      }
    }
  }

  // 点击提交按钮
  btn.onclick = function(){
    // 准备存放选中复选框的值
    var arr = [];
    // 遍历所有复选框
    for(var i=0;i<checks.length;i++){
      // 查找被选中的复选框
      if(checks[i].className.indexOf("active") !== -1){
        // 记录选中复选框的值
        arr.push(checks[i].dataset.value);
      }
    }
    console.log(arr);
  }
  
  // 获取单个复选框的状态
  var b = document.querySelector(".b")
  b.onclick = function(){
    console.log( this.checked );
  }

  
</script>
</html>